<template>
  <div>
      <el-form :inline="true" :model="ticketSearchFrom" class="demo-form-inline">
          <el-form-item label="序号">
              <el-input v-model="ticketSearchFrom.searchId" placeholder="序号"></el-input>
          </el-form-item>
          <el-form-item label="比赛项目">
              <el-input v-model="ticketSearchFrom.searchName" placeholder="比赛项目"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="page">查询</el-button>
              <el-button type="primary" @click="add">添加</el-button>
          </el-form-item>
      </el-form>

      <!--基础表格-->
      <el-table
              :data="ticketAry"
              style="width: 100%">
          <el-table-column
                  prop="ticketid"
                  label="序号"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="ticketName"
                  label="比赛项目"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="beginTime"
                  label="开始时间"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="price"
                  label="价格"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="totalCount"
                  label="剩余票数"
                  width="180">
          </el-table-column>
          <el-table-column
                  label="操作"
          >
              <template slot-scope="scope">
                  <el-button type="text" size="small" @click="bianji(scope.$index,scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="shanchu(scope.$index,scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="pageList"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
      <!--添加对话框-->
      <el-dialog
          title="添加信息"
          :visible.sync="addDialogVisible"
          width="30%"
      >
          <el-form :model="addForm" label-width="100px">
              <el-form-item label="比赛名称">
                  <el-input v-model="addForm.ticketName"></el-input>
              </el-form-item>
              <el-form-item label="比赛场地">
                  <el-select v-model="addForm.stadiumID" placeholder="请选择比赛场地">
                      <el-option label="国家体育场" value="1"></el-option>
                      <el-option label="国家游泳中心" value="2"></el-option>
                      <el-option label="工人体育场" value="3"></el-option>
                      <el-option label="北京大学体育馆" value="4"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                  <el-input type="datetime-local" v-model="addForm.beginTime"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                  <el-input v-model="addForm.price"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                  <el-input type="textarea" v-model="addForm.descn"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addSave">添加</el-button>
                  <el-button @click="addDialogVisible=false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>

      <el-dialog
          title="添加信息"
          :visible.sync="editDialogVisible"
          width="30%"
      >
          <el-form :model="editForm" label-width="100px">
              <el-form-item label="比赛名称">
                  <el-input v-model="editForm.ticketName"></el-input>
              </el-form-item>
              <el-form-item label="比赛场地">
                  <el-select v-model="editForm.stadiumID" placeholder="请选择比赛场地">
                      <el-option v-for="optione in options" :value="optione.value">
                          {{optione.label}}
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                  <el-input type="datetime-local" v-model="editForm.beginTime"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                  <el-input v-model="editForm.price"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                  <el-input type="textarea" v-model="editForm.descn"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="edit">修改</el-button>
                  <el-button @click="editDialogVisible=false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>
  </div>
</template>

<script>
  export default ({
      name:'app',
      data(){
          return{
              ticketAry: [],
              current: 1,
              size: 5,
              total: 0,
              ticketSearchFrom: {},
              pageList: [2, 5, 10, 15],
              addDialogVisible:false,
              addForm:{},
              editDialogVisible:false,
              editForm:{},
              options:[
                  {value:'1',label:'国家体育场'},
                  {value:'2',label:'国家游泳中心'},
                  {value:'3',label:'工人体育场'},
                  {value:'4',label:'北京大学体育馆'}
              ]
          }
      },
      methods:{
          page(){
              this.$axios.post(`/ticket/page/${this.current}/${this.size}`,this.ticketSearchFrom).then(r=>{
                  this.ticketAry = r.data.list
                  this.total = r.data.total
              })
          },
          handleSizeChange(val){
              this.size = val
              this.page()
          },
          handleCurrentChange(val){
              this.current = val
              this.page()
          },
          add(){
              this.addDialogVisible = true
              this.addForm = {}
          },
          addSave(){
              this.$axios.post(`/ticket/add`,this.addForm).then(r=>{
                  this.addDialogVisible = false
                  window.location.reload()
                  alert("添加成功")
              })
          },
          shanchu(index,row){
              let id=row.ticketid
              console.log(id)
              if (confirm("您确定要删除吗？")){
                  this.$axios.delete(`/ticket/${id}`).then(r=>{
                      console.log(r)
                      alert(r.data)
                  })
              }
          },
          bianji(index,row){
              this.editDialogVisible = true
              this.$axios.get(`/ticket/getId/${row.ticketid}`).then(r=>{
                  this.editForm=r.data
              })
          },
          edit(){
              this.$axios.put(`/ticket`,this.editForm).then(r=>{
                  this.editDialogVisible = false
                  alert("修改成功")
              })
          }
      },
      created(){
          this.page()
      }
  })
</script>